Implementación web

Índice

1. Saludo y Presentación

Implementación web en GAS-Diseño (MVC)

Presentación: "Hoy vamos a trabajar en un proyecto muy interesante que involucra la creación de un formulario de entrada de datos utilizando Google Apps Script (GAS) y Bootstrap 5.3.2. Este proyecto no solo te permitirá aprender a utilizar estas herramientas, sino también a entender cómo trabajar de manera modular y eficiente."

Clase previa Ir al enlace

2. Objetivo de la Clase

Objetivo: "El objetivo de hoy es que comprendas cómo utilizar un modelo de IA para que te asista en la construcción de un formulario de entrada de datos utilizando Google Apps Script (GAS) y Bootstrap 5.3.2. Este proyecto te permitirá aprender a utilizar estas herramientas y a entender cómo trabajar de manera modular y eficiente."

Desglose:

• Bootstrap Framework: Utilizaremos Bootstrap 5.3.2 para dar estilos al formulario y garantizar su responsividad.
• SweetAlert: Utilizaremos SweetAlert para mostrar alertas y mejorar la experiencia del usuario.
• Modelo Vista Controlador (MVC):
  • Modelo: Se encarga de la lógica de negocio y la interacción con la base de datos (en este caso, la hoja de cálculo).
  • Vista: Es la interfaz de usuario, en este caso, el formulario HTML.
  • Controlador: Maneja la interacción del usuario y actualiza el Modelo y la Vista según sea necesario.
• División de Responsabilidades:
  • Lado del Servidor: Maneja la lógica de negocio y la interacción con la hoja de cálculo.
  • Lado del Cliente: Maneja la interfaz de usuario y la interacción del usuario.
  • Lógica de Comunicación: Explica cómo se comunican las solicitudes del lado del cliente con el servidor.
• Proyecto GAS: Recordaremos que este formulario es un proyecto en GAS porque usaremos las hojas de cálculo como bases de datos.

3. Desarrollo del Proyecto

Paso 1: Configuración Inicial del Proyecto (10 minutos)

• Creación de la Carpeta en Drive: "Primero, vamos a crear una carpeta en Google Drive donde almacenaremos todos los archivos del proyecto."
• Creación del Spreadsheet: "Dentro de esta carpeta, crea un nuevo Spreadsheet. Este será nuestro 'back-end' donde almacenaremos los datos del formulario."
• Creación de la Hoja de Cálculo "Matricula": "Dentro del Spreadsheet, crea una nueva hoja de cálculo y nómbrala 'Matricula'. Esta hoja guardará la información que recogeremos con el formulario."
• Estructura de la Hoja de Cálculo: "Cada columna en la hoja 'Matricula' representará un input del formulario. La primera fila será la cabecera, donde definiremos los nombres de los campos del formulario."

Paso 2: Entorno de Desarrollo en GAS (10 minutos)

• Creación del Proyecto Apps Script: "Ahora, vamos a crear un proyecto Apps Script. Para hacerlo, ve a la barra de tareas y selecciona 'Extensiones' > 'Apps Script'."
• Asociación del Proyecto al Spreadsheet: "El proyecto Apps Script estará asociado al Spreadsheet que acabamos de crear. Esto nos permitirá interactuar con la hoja de cálculo desde nuestro código."
• Estructura del Proyecto: "En el entorno de desarrollo de GAS, el servidor estará representado por archivos con extensión .gs y el lado del cliente por archivos con extensión .html."

4. Desarrollo del Proyecto (Continuación)

Paso 3: Función del Lado del Servidor doGet() (5 minutos)

• Importancia de doGet(): "La función doGet() es crucial en nuestra implementación web. Esta función se encarga de renderizar el HTML del lado del cliente cuando un usuario accede al formulario vía web."
• Ejemplo de Código:

  function doGet() {
    var template = HtmlService.createTemplateFromFile("Inscripciones");
    return template.evaluate();
  }

• Explicación: "Esta función carga el archivo HTML 'Inscripciones' y lo renderiza en el navegador del usuario."

Paso 4: Creación del Archivo HTML (5 minutos)

• Creación del Archivo: "Ahora, crea un archivo HTML en el proyecto Apps Script. Este archivo será el encargado de renderizar el lado del cliente."
• Estructura Básica del HTML: "El archivo HTML debe incluir la estructura básica de un formulario, así como las funciones JavaScript que manejarán el envío del formulario, validaciones y mensajes para el manejo de errores o éxitos."

  <!DOCTYPE html>
  <html lang="es">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Título de la Página</title>
  
      
      <style>
      </style>
  
  </head>
  
  <body>
      <h1>Título Principal</h1>
      <p>Este es un párrafo de texto.</p>
      <a href="https://www.ejemplo.com">Enlace a ejemplo</a>
      <img src="imagen.jpg" alt="Descripción de la imagen">
      <div>
          <h2>Título Secundario</h2>
          <p>Otro párrafo de texto.</p>
      </div>
      
      <script>
      </script>
  
  </body>
  </html>

• Incorporación de Bootstrap 5.3.2: "Bootstrap 5.3.2 será incorporado por CDN. Esto nos permitirá dar estilos al formulario y garantizar su responsividad."

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">

• Incorporación de SweetAlert: "SweetAlert será incorporado por CDN para mostrar alertas y mejorar la experiencia del usuario."

  <script src='https://cdn.jsdelivr.net/npm/sweetalert2@11'></script>

• Orden de Carga: "Es importante seguir el orden de carga correcto para asegurar que todos los recursos se carguen correctamente. Primero, incluiremos las etiquetas base de toda estructura HTML, luego las etiquetas de script y finalmente la inclusión de los frameworks Bootstrap y SweetAlert. En el header, aunque es un script del CDN de SweetAlert, este debe ir adentro para garantizar que esté disponible. Así mismo, los de Bootstrap, exceptuando el script de bundle que irá al final, pero dentro del body."

5. Uso del Modelo de IA y Consideraciones

Paso 5: Uso del Modelo de IA (5 minutos)

• Creación de la Estructura HTML y Lógica de Funciones: "El estudiante debe utilizar un modelo de IA para crear la estructura HTML y la lógica de las funciones del lado del cliente. Estas funciones se comunicarán con la función del lado del servidor que se encargará de registrar los datos del formulario en la hoja de cálculo."
• Ejemplo de Prompt:

  "Trabajo en un proyecto GAS y quiero crear un formulario de entrada de datos en HTML utilizando Bootstrap 5.3.2. El formulario debe incluir campos para [aca se especifican]. Al enviar el formulario, los datos deben ser enviados al servidor de Google Apps Script y deberás crear una función que pueda capturar los datos y estos sean guardados en una hoja de cálculo que he llamado 'Matricula'. Utiliza SweetAlert para mostrar una alerta de éxito cuando los datos se envíen correctamente. Proporciona el código HTML, CSS, JavaScript del lado del cliente y el script del lado del servidor en Google Apps Script. Explica cada parte del código y proporciona comentarios detallados. Trabaja modularmente para poder hacer cambios fácilmente de ser necesario."

Consideraciones del Lado del Servidor (5 minutos)

• Establecimiento de Índices en Columnas: "Cuando creamos la función del lado del servidor, es importante establecer índices en las columnas. Esto significa que no tomaremos los nombres de las columnas, sino que cada columna estará referenciada según su posición."
• Primera Fila como Cabecera: "La primera fila de la hoja de cálculo se establecerá como cabecera. Esto nos permitirá ingresar datos en las columnas correspondientes, evitando que si se hacen cambios en los nombres de los elementos, el script falle."
• Nombre de la Hoja: "Es importante tener en cuenta que el nombre de la hoja donde se vaciará la información distingue entre mayúsculas y minúsculas."

Consideraciones del Lado del Cliente (5 minutos)

• Validación de Campos: "Es importante saber que ciertos campos deben poder validarse si están presentes."
• Trabajo Modular: "También se debe trabajar modularmente."
• Limpieza del Formulario: "Cuando se envía información, debe limpiarse el formulario."
• Spinner en el Botón de Enviar: "Mientras se envía la información, se debe colocar en el botón de enviar un spinner para evitar el envío doble de información e indicar al usuario que algo está ocurriendo."
• Deshabilitación del Botón de Enviar: "Si el formulario está vacío, entonces no se habilita el botón de enviar."
• Información en Mayúsculas: "La información que se ingresa en el formulario se envía a la hoja de cálculo en mayúsculas."

×

Generador de Prompt para Formulario de Entrada de Datos

Nombres de las columnas (separados por comas)

Nombre de la hoja de cálculo (distingue entre mayúsculas y minúsculas)

Prompt Generado